<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>fog and snow</title>
    <link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
    <style>
        #snowWrap, #canvasWrap{position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 100; overflow: hidden;}
        #snowWrap div{color: #fff; position: absolute; -moz-user-select: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: none;}
        #canvasWrap{z-index: 50;}
        #fog{cursor: url(http://findicons.com/files/icons/2652/gentleface/48/brush_icon.png) 10 40, auto;}
    </style>
</head>
<body class="bgBlack">
    <div id="snowWrap"></div>
    <div id="canvasWrap">
        <canvas id="fog"></canvas>
    </div>
    <section class="snow"></section>
    <script>
        var Draw = (function() {
            function Draw(ctx) {
                this.ctx = ctx || document.getElementById('fog').getContext('2d');
            }
            ;
            Draw.prototype.dStart = function(pageX, pageY) {
                this.ctx.globalCompositeOperation = 'destination-out';
                this.ctx.lineWidth = 30;
                this.ctx.lineCap = this.ctx.lineJoin = 'round';
                this.ctx.beginPath();
                this.ctx.moveTo(pageX, pageY);
            };
            Draw.prototype.dLine = function(pageX, pageY) {
                this.ctx.lineTo(pageX, pageY);
                this.ctx.stroke();
            };
            Draw.prototype.dEnd = function() {
                this.ctx.closePath();
            };

            return Draw;
        }());
        //雾化效果，可以用来实现刮卡抽奖
        var Fog = (function() {
            function Fog(cvs) {
                this.cvs = cvs || document.getElementById('fog');
                this.ctx = this.cvs.getContext('2d');
                this.enableBrush = false;
                this.draw = new Draw(this.ctx);
                this.fStart();
                this.bindEvent();
            }
            ;
            Fog.prototype.fStart = function() {
                var me = this, canvasWrap = document.getElementById('canvasWrap'), canvasWrapWidth = canvasWrap.offsetWidth, canvasWrapHeight = canvasWrap.offsetHeight;
                me.cvs.setAttribute('width', canvasWrapWidth);
                me.cvs.setAttribute('height', canvasWrapHeight);
                var i = 0;
                var slowlyFog = setInterval(function() {
                    i++;
                    var density = i * 0.001;
                    me.ctx.clearRect(0, 0, canvasWrapWidth, canvasWrapHeight);
                    me.ctx.fillStyle = 'rgba(250, 250, 250, ' + density + ')';
                    me.ctx.fillRect(0, 0, canvasWrapWidth, canvasWrapHeight);
                    me.ctx.fill();
                    if (i == 300) {
                        clearInterval(slowlyFog);
                        canvasWrap.style.zIndex = 200;
                    }
                }, 10);
            };
            Fog.prototype.bindEvent = function() {
                var me = this, enableBrush = false;
                me.cvs.addEventListener('mousedown', function(e) {
                    me.draw.dStart(e.pageX, e.pageY);
                    enableBrush = true;
                });
                me.cvs.addEventListener('mousemove', function(e) {
                    if (enableBrush)
                        me.draw.dLine(e.pageX, e.pageY);
                });
                me.cvs.addEventListener('mouseup', function(e) {
                    me.draw.dEnd()
                    enableBrush = false;
                });
            };

            return Fog;
        }());
        //梅花形状的雪花效果
        var Snow = (function() {
            function Snow(density, speed) {
                this.startSnow(density, speed);
            }
            ;
            Snow.prototype.startSnow = function(density, speed) {
                density = Math.floor(100 * (1 / density));
                var me = this, snowflakes = [], snowWrap = document.getElementById('snowWrap'), snowWrapWidth = snowWrap.offsetWidth, snowWrapHeight = snowWrap.offsetHeight;
                var temp = 0;
                setInterval(function() {
                    if (temp++ == density) {
                        temp = 0;
                        var el = document.createElement('div');
                        el.innerHTML = '*';
                        el.ztop = -2;
                        el._ztop = 2 + Math.random() * 5;
                        el.zleft = Math.random() * snowWrapWidth;
                        el._zleft = Math.random() < 0.5 ? Math.random() : Math.random() * (-1);
                        el.style.fontSize = 30 * Math.random() + 'px';
                        el.style.opacity = 0.5 + Math.random() * 0.5;
                        el.style.left = el.zleft + 'px';
                        snowWrap.appendChild(el);
                        snowflakes.push(el);
                    }

                    for ( var i = 0; i < snowflakes.length; i++) {
                        snowflakes[i].ztop += snowflakes[i]._ztop;
                        snowflakes[i].zleft += snowflakes[i]._zleft;
                        if (snowflakes[i].ztop > snowWrapHeight) {
                            snowWrap.removeChild(snowflakes[i]);
                            snowflakes.splice(i, 1)
                        } else {
                            snowflakes[i].style.top = snowflakes[i].ztop + 'px';
                            snowflakes[i].style.left = snowflakes[i].zleft + 'px'
                        }
                    }

                }, speed);
            };

            return Snow;
        }());

        //new Snow(150, 60);
        //new Fog();
//利用canvas实现的下雪效果
(function () {
  var COUNT = 300;
  var snow = document.querySelector('.snow');
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var width = snow.clientWidth;
  var height = document.body.scrollHeight;
  var i = 0;
  var active = false;

  function onResize() {
    width = snow.clientWidth;
    height =  document.body.scrollHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = '#FFF';

    var wasActive = active;
    active = width > 600;

    if (!wasActive && active)
      requestAnimFrame(update);
  }

  var Snowflake = function () {
    this.x = 0;
    this.y = -150;
    this.vy = 0;
    this.vx = 0;
    this.r = 0;

    this.reset();
  }

  Snowflake.prototype.reset = function() {
    this.x = Math.random() * width;
    this.y = Math.random() * -height;
    this.vy = 0.1 + Math.random() * 2;
    this.vx = 0.5 - Math.random();
    this.r = 1 + Math.random() * 5;
    this.o = 0.5 + Math.random() * 0.5;
  }

  canvas.style.position = 'absolute';
  canvas.style.left = canvas.style.top = '0';

  var snowflakes = [], snowflake;
  for (i = 0; i < COUNT; i++) {
    snowflake = new Snowflake();
    snowflake.reset();
    snowflakes.push(snowflake);
  }

  function update() {

    ctx.clearRect(0, 0, width, height);

    if (!active)
      return;

    for (i = 0; i < COUNT; i++) {
      snowflake = snowflakes[i];
      snowflake.y += snowflake.vy;
      snowflake.x += snowflake.vx;

      ctx.globalAlpha = snowflake.o;
      ctx.beginPath();
      ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();

      if (snowflake.y > height) {
        snowflake.reset();
      }
    }
    requestAnimFrame(update);
  }
  // shim layer with setTimeout fallback
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

  onResize();
  snow.appendChild(canvas);
})();
    </script>
</body>
</html>